<template>
  <view class="profile">
    <button class="avatar-wrapper">
      <image
        class="avatar"
        src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
      ></image>
    </button>
    <view class="nickname-wrapper">
      <label for="">昵称:</label>
      <input type="nickname" />
    </view>
    <!-- <van-button type="primary" block>确认</van-button> -->
  </view>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.profile {
  padding: 0 40rpx;
}

.avatar-wrapper {
  padding: 0;
  width: 112rpx;
  border-radius: 16rpx;
  margin-top: 80rpx;
  margin-bottom: 120rpx;

  &::after {
    content: '';
    border: none;
  }

  .avatar {
    display: block;
    width: 112rpx;
    height: 112rpx;
  }
}

.nickname-wrapper {
  display: flex;
  align-items: center;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 40rpx;

  label {
    width: 100rpx;
    color: #333;
    font-size: 34rpx;
  }

  input {
    color: #666;
    font-size: 34rpx;
  }
}
</style>
